import React, { useState, useEffect } from "react";
import { View } from "@tarojs/components";
import classNames from "classnames";

import "./index.scss";
import { ShareHeader, ShareInfoType } from "../../components/share-header";
import { FileComponent } from "../file/file-component";
import { useRouter } from "@tarojs/taro";
import { fetchFileShareInfo } from "../../api";
import { getOssUrl } from "../../utils";
import { isSafari } from "../../../src/utils/check-browser";

const FileIndex = () => {
  const router = useRouter();
  const channelId = router?.params?.channelId;
  const shareId = router?.params?.shareId || "";
  const [shareInfo, setShareInfo] = useState<ShareInfoType>();
  useEffect(() => {
    const init = async () => {
      const [getFileShareInfoRes] = await Promise.all([
        fetchFileShareInfo(shareId),
      ]);

      if (getFileShareInfoRes?.code === 0) {
        const data = getFileShareInfoRes?.data;
        const info = {
          creatorInfo: {
            img: getOssUrl({
              bucketName: data?.creator?.img?.bucketName,
              path: data?.creator?.img?.path,
            }),
            name: data?.creator?.nickName,
          },
          companyInfo: {
            img: getOssUrl({
              bucketName: data?.company?.logo?.bucketName,
              path: data?.company?.logo?.path,
            }),
            name: data?.company?.name,
          },
        };
        setShareInfo(info);
      } else {
        alert(getFileShareInfoRes?.message);
      }
    };
    init();
  }, []);
  return (
    <View className="file-index">
      <ShareHeader shareInfo={shareInfo as ShareInfoType} title="文件分享" />
      <FileComponent tab channelId={channelId} />
      {isSafari() && (
        <div
          className={classNames("bottom-div", {
            "bottom-50": true,
          })}
        />
      )}
    </View>
  );
};

export default FileIndex;
